<template>
	<div>
		<van-cell-group>
			<van-field 
				label="手机号"
				v-model="new_mobile" 
				placeholder="请输入手机号"
				:error="!!$vuelidation.error('new_mobile')" />
		</van-cell-group>
		
		<div class="bottom_btn">
			<van-button size="large" type="danger" @click="saveMobile">保存</van-button>
		</div>
	</div>
</template>


<script>
	import { USER_MODIFY } from '@/api/user';
	
	export default {
		data() {			
			return {
				new_mobile: "",
				id: this.getUser().id
			}
		},
		
		vuelidation: {
			data: {
				new_mobile: {
					required: true,
					mobile: true
				}
			}
		},
		
		methods: {
			vuelidat(){
				this.$vuelidation.valid();
				if(this.$vuelidation.error('new_mobile')){
					const msg = this.$vuelidation.error('new_mobile')
					this.$toast(msg == 'Required' ? '请输入手机号' : msg);
					return false;
				}
				return true;
			},
			saveMobile(){
				this.$reqPost(USER_MODIFY, {id: this.id, mobile: this.new_mobile}).then(res => {
						 return this.$dialog.alert({message: '保存成功'})
					}).then(() => {
						this.$router.go(-1);
					});
			}
		}
	}

</script>

<style lang="scss" scoped>
	@import "../../../../assets/scss/var";
	@import "../../../../assets/scss/mixin";
	.bottom_btn{
		padding: 30px 15px 0 15px; 
	}
	
	.verifi_code{
		@include one-border;
		padding-left: 10px;
		&::after{
			border-bottom: 0;
			border-left: 1px solid $border-color;
		}
		
		&_counting{
			color: $font-color-gray;
		}
	}
</style>
